<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    {# <link rel="icon" href="{{ url_for('static', _external=True, filename='img/favicon.ico') }}"> #}
    <link rel="shortcut icon" href="{{ url_for('static', filename='img/favicon.ico') }}">
    <title>后台登录 - 后台管理</title>
    <!-- Bootstrap -->
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <!-- Plugin -->
    <link href="{{ url_for('static', filename='plugin/metisMenu/metisMenu.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='plugin/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/bootstrap-select.min.css') }}" rel="stylesheet">
    <!-- Custom -->
    <link href="{{ url_for('static', filename='css/sb-admin-2.min.css') }}" rel="stylesheet">
    {% block extra_css %}{% endblock %}
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>
    <div class="container">
    {# 闪现消息 success info warning danger #}
    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
    {% for category, message in messages %}
        <div class="alert alert-{{ category }}" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            {{ message }}
        </div>
    {% endfor %}
    {% endif %}
    {% endwith %}
    </div>

    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <div class="login-panel panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">后台登录</h3>
                    </div>
                    <div class="panel-body">
                        <form class="form-horizontal" method="post" action="">
                            {{ form.csrf_token }}

                            <div class="form-group{% if form.account.errors %} has-error{% endif %}">
                                <div class="col-sm-12">
                                    {{ form.account(class="form-control", placeholder="登录账号") }}
                                    {% for error in form.account.errors %}
                                        <span class="help-block">{{ error }}</span>
                                    {% endfor %}
                                </div>
                            </div>
                            <div class="form-group{% if form.password.errors %} has-error{% endif %}">
                                <div class="col-sm-12">
                                    {{ form.password(class="form-control", placeholder="登录密码") }}
                                    {% for error in form.password.errors %}
                                        <span class="help-block">{{ error }}</span>
                                    {% endfor %}
                                </div>
                            </div>
                            <div class="form-group{% if form.sms.errors %} has-error{% endif %}">
                                <div class="col-sm-12">
                                    <div class="input-group">
                                        {{ form.sms(class="form-control", placeholder="短信验证码", maxlength=6) }}
                                        <span class="input-group-btn">
                                            <button id="get_sms_btn" class="btn btn-default" type="button">
                                                <span class="glyphicon glyphicon-envelope"></span> <i>发送短信</i>
                                            </button>
                                        </span>
                                    </div>
                                    {% for error in form.sms.errors %}
                                        <span class="help-block">{{ error }}</span>
                                    {% endfor %}
                                </div>
                            </div>
                            <div class="form-group{% if form.remember.errors %} has-error{% endif %}">
                                <div class="col-sm-12">
                                    <div class="checkbox">
                                        <label>
                                            {{ form.remember }} 记住登录状态
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <button type="submit" class="btn btn-success btn-load btn-block" data-loading-text="登录中" autocomplete="off">登录</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="panel-footer text-center"><i id="current_time">{{ moment().format('dddd, MMMM Do YYYY, h:mm:ss a') }}</i></div>
                </div>
            </div>
        </div>
    </div>

    <!-- /#wrapper -->

    <!-- jQuery -->
    <script src="{{ url_for('static', filename='js/jquery-1.11.3.min.js') }}"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>

    {{ moment.include_moment() }}

    {{ moment.lang('zh-cn') }}

    <!-- Metis Menu Plugin JavaScript -->
    <script src="{{ url_for('static', filename='plugin/metisMenu/metisMenu.min.js') }}"></script>

    <!-- Custom Theme JavaScript -->
    <script src="{{ url_for('static', filename='js/sb-admin-2.js') }}"></script>
    <script src="{{ url_for('static', filename='js/custom.js', v='1.4.74') }}"></script>

    <script>
        // 倒计时
        var countdown=60;
        function set_time(val) {
            if (countdown == 0) {
                val.removeAttr("disabled");
                val.find("i").first().html("发送短信");
                countdown = 60;
                return;
            } else {
                val.attr("disabled", true);
                val.find("i").first().html("重新发送(" + countdown + ")");
                countdown--;
            }
            setTimeout(function () {
                set_time(val)
            }, 1000)
        }

        // 当前时间同步刷新
        var update_time;
        (update_time = function () {
            $('#current_time').html(moment().format('dddd, MMMM Do YYYY, h:mm:ss a'));
        })();
        setInterval(update_time, 1000);

        // 点击发送手机验证码到手机 - ajax
        $('#get_sms_btn').click(function () {
            var cur_obj = $(this);
            var account = $('#account');
            // 校验手机号码，图形验证码
            if(!account.val()){
                account.focus();
                return;
            }
            // 获取短信验证码
            $.getJSON('{{ url_for('ajax_get_sms_code') }}',
                {
                    account: account.val()
                }, function (data) {
                    var result = data.result;  // true/false
                    if(result==false){
                        //console.log(result);
                        alert(data.msg);
                        account.focus();
                        return false;
                    }else {
                        $('#sms').focus();
                        set_time(cur_obj);
                    }
                }
            );
        });
    </script>

</body>

</html>
